<template>
  <div class="form1">
    <div class="mobile">
      <input type="text" v-model="userInfo.user_phone" disabled>
      <div class="phoneErrMessage">{{ phoneErrorMessage }}</div>
    </div>
    <div class="code flex-between">
      <input type="text" placeholder="短信验证码" :class="{'error': errorMessage}" v-model="code" @input="resetError">
      <div :class="{'codeNum': true, 'primary': countDownTime === '获取验证码', 'cp': countDownTime === '获取验证码', 'na': countDownTime !== '获取验证码'}" @click="getPhoneCode">{{ countDownTime }}</div>
      <div class="errorMessage">{{ errorMessage }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'from1',
  data () {
    return {

    }
  },
  computed: {
    // 用户信息
    userInfo () {
      return this.$store.state.user.userInfo
    },
    // 获取手机验证码倒计时文本
    countDownTime () {
      return this.$store.state.common.countDownText
    },
    // 手机号下方错误提示
    phoneErrorMessage () {
      return this.$store.state.findPassword.phoneErrorMessage
    },
    // 验证码下方错误提示
    errorMessage () {
      return this.$store.state.findPassword.errorMessage
    },
    // 手机验证码
    code: {
      get () {
        return this.$store.state.findPassword.code
      },
      set (val) {
        this.$store.commit('findPassword/set_code', val)
      }
    }
  },
  methods: {
    // 重置错误提示
    resetError () {
      if (this.errorMessage) {
        this.$store.commit('findPassword/set_errorMessage', '')
      }
      if (this.phoneErrorMessage) {
        this.$store.commit('findPassword/set_phoneErrorMessage', '')
      }
    },
    // 获取手机验证码
    getPhoneCode () {
      if (this.countDownTime === '获取验证码') {
        this.$store.commit('common/set_showImgDialog', true)
        this.$store.commit('common/set_fnName', 'findPassword/getFindPasswordPhoneCode')
        this.$store.commit('common/set_fnParams', {})
        this.$store.commit('common/set_imgCode', '')
      } else {
        return false
      }
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
.form1 {
  padding: 0 70px;

  input {
    height: 48px;
    border: 1px solid #d8dee9;
    border-radius: 2px;
    outline: none;
    padding-left: 16px;
    font-size: 16px;
    color: #0D172C;
  }

  &::-webkit-input-placeholder {
    font-size: 16px;
    color: #9eaac4;
  }

  .mobile {
    position: relative;
    margin-bottom: 32px;

    input {
      width: 400px;
      background-color: #F6F7FB;
    }

    .phoneErrMessage {
      position: absolute;
      top: 52px;
      font-size: 12px;
      color: #FF2929;
    }
  }
  .code {
    margin-bottom: 32px;
    position: relative;
    input {
      width: 268px;
    }

    .error {
      border-color: #ff2929;
    }

    .codeNum {
      width: 120px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      border: 1px solid #d8dee9;
      border-radius: 2px;
      color: #5f7196;
      font-weight: 400;
      font-size: 16px;
    }

    .primary {
      border-color: #304EEC;
      color: #304EEC
    }

    .errorMessage {
      position: absolute;
      top: 52px;
      font-size: 12px;
      color: #FF2929;
    }
  }
}
</style>
